<script setup name="ComputeService">
import Template from './Template.vue'
import { useRoute } from 'vue-router'

import { useI18n } from 'vue-i18n'
const { t } = useI18n()

const route = useRoute()
</script>

<template>
	<main v-if="!route.meta?.isIndependence" class="compute-service">
		<section class="hero">
			<!-- Floating particles for dynamic effect -->
			<div class="particles">
				<span class="particle"></span>
				<span class="particle"></span>
				<span class="particle"></span>
				<span class="particle"></span>
				<span class="particle"></span>
				<span class="particle"></span>
				<span class="particle"></span>
				<span class="particle"></span>
				<span class="particle"></span>
				<span class="particle"></span>
				<span class="particle"></span>
				<span class="particle"></span>
			</div>

			<!-- Light streaks for horizontal movement effect -->
			<span class="light-streak"></span>
			<span class="light-streak"></span>
			<span class="light-streak"></span>
			<div class="hero-content">
				<h1>{{ t('routes.ComputeService.title') }}</h1>
				<p>
					{{ t('home.service.content') }}
				</p>
			</div>
		</section>
		<Template />
	</main>

	<router-view v-else></router-view>
</template>

<style scoped lang="scss">
/*
 * ===========================================
 * 计算服务页面样式 - ComputeService/index.vue
 * ===========================================
 */

.compute-service {
	/* 确保 el-image 组件可以正常触发预览 */
	:deep(.el-image) {
		cursor: pointer;

		&:hover {
			opacity: var(--opacity-90);
		}
	}

	/* 确保 image-overlay 不会阻挡点击事件 */
	.image-overlay {
		pointer-events: none;
	}
}

/* Hero 区域样式 */
.hero {
	position: relative;
	height: 60vh;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	background: linear-gradient(
		135deg,
		var(--brand-primary) 0%,
		var(--brand-primary-600) 50%,
		var(--brand-primary-700) 100%
	);

	.hero-content {
		text-align: center;
		z-index: var(--z-30);
		color: var(--color-white);
		max-width: 800px;
		padding: 0 var(--space-4);

		h1 {
			font-size: var(--font-size-4xl);
			font-weight: var(--font-weight-bold);
			margin-bottom: var(--space-6);
			text-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
			line-height: var(--line-height-tight);
		}

		p {
			font-size: var(--font-size-lg);
			margin-bottom: var(--space-8);
			color: rgba(255, 255, 255, 0.9);
			line-height: var(--line-height-relaxed);
		}
	}

	/* 粒子效果 */
	.particles {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		overflow: hidden;
		z-index: var(--z-10);

		.particle {
			position: absolute;
			display: block;
			pointer-events: none;
			background-color: rgba(255, 255, 255, 0.3);
			width: 2px;
			height: 2px;
			border-radius: var(--radius-full);
			animation: floatUp 15s linear infinite;

			&:nth-child(1) {
				left: 10%;
				top: 80%;
				animation-delay: 0s;
			}
			&:nth-child(2) {
				left: 25%;
				top: 90%;
				animation-delay: 2s;
			}
			&:nth-child(3) {
				left: 40%;
				top: 85%;
				animation-delay: 4s;
			}
			&:nth-child(4) {
				left: 55%;
				top: 95%;
				animation-delay: 1s;
			}
			&:nth-child(5) {
				left: 70%;
				top: 88%;
				animation-delay: 3s;
			}
			&:nth-child(6) {
				left: 85%;
				top: 92%;
				animation-delay: 5s;
			}
			&:nth-child(7) {
				left: 15%;
				top: 85%;
				animation-delay: 6s;
			}
			&:nth-child(8) {
				left: 30%;
				top: 95%;
				animation-delay: 8s;
			}
			&:nth-child(9) {
				left: 45%;
				top: 90%;
				animation-delay: 7s;
			}
			&:nth-child(10) {
				left: 60%;
				top: 87%;
				animation-delay: 9s;
			}
			&:nth-child(11) {
				left: 75%;
				top: 93%;
				animation-delay: 10s;
			}
			&:nth-child(12) {
				left: 90%;
				top: 89%;
				animation-delay: 11s;
			}
		}
	}

	/* 光束效果 */
	.light-streak {
		position: absolute;
		width: 150px;
		height: 2px;
		background: linear-gradient(
			90deg,
			transparent,
			rgba(255, 255, 255, 0.4),
			transparent
		);
		transform: rotate(-30deg);
		animation: lightMove 10s linear infinite;
		z-index: var(--z-20);

		&:nth-child(2) {
			animation-delay: 3s;
			top: 40%;
		}

		&:nth-child(3) {
			animation-delay: 6s;
			top: 70%;
		}
	}
}

/* 动画定义 */
@keyframes floatUp {
	0% {
		opacity: 0;
		transform: translateY(0);
	}
	10% {
		opacity: 1;
	}
	90% {
		opacity: 1;
	}
	100% {
		opacity: 0;
		transform: translateY(-60vh);
	}
}

@keyframes lightMove {
	0% {
		left: -150px;
		opacity: 0;
	}
	10% {
		opacity: 1;
	}
	90% {
		opacity: 1;
	}
	100% {
		left: 100vw;
		opacity: 0;
	}
}

/* 响应式设计 */
@media (max-width: var(--breakpoint-md)) {
	.hero {
		height: 50vh;

		.hero-content {
			padding: 0 var(--space-3);

			h1 {
				font-size: var(--font-size-3xl);
				margin-bottom: var(--space-4);
			}
			p {
				font-size: var(--font-size-base);
				margin-bottom: var(--space-6);
			}
		}
	}
}

@media (max-width: var(--breakpoint-sm)) {
	.hero {
		height: 40vh;
		min-height: 300px; /* 确保最小高度 */

		.hero-content {
			padding: 0 var(--space-2);
			max-width: 100%;

			h1 {
				font-size: var(--font-size-2xl);
				margin-bottom: var(--space-3);
				line-height: var(--line-height-snug);
			}
			p {
				font-size: var(--font-size-sm);
				margin-bottom: var(--space-4);
				line-height: var(--line-height-normal);
			}
		}

		/* 移动端粒子效果优化 */
		.particles .particle {
			width: 1px;
			height: 1px;
		}
	}
}

/* 超小屏幕优化 */
@media (max-width: 480px) {
	.hero {
		height: 35vh;
		min-height: 280px;

		.hero-content {
			h1 {
				font-size: var(--font-size-xl);
			}
			p {
				font-size: var(--font-size-xs);
			}
		}
	}
}

/* 移动端触摸优化 */
@media (hover: none) and (pointer: coarse) {
	.compute-service {
		/* 移动端禁用悬停效果 */
		:deep(.el-image):hover {
			opacity: 1;
		}
	}
}
</style>
